<template>
  <div class="tabs">
    <div class="tabs-item">
      <router-link v-bind:to="{ path: '/goods' }">Goods</router-link>
    </div>
    <div class="tabs-item">
      <router-link v-bind:to="{ path: '/comments' }">Comments</router-link>
    </div>
    <div class="tabs-item">
      <router-link v-bind:to="{ path: '/store' }">Store</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="less" scoped>
.tabs {
  @height: 40px;

  display: flex;
  width: 100%;
  height: @height;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  line-height: @height;

  .tabs-item {
    flex: 1;
    text-align: center;

    a {
      display: inline-block;
      width: 100%;
    }

    a.active {
      color: #ff3366;
    }
  }
}
</style>
